<template>
  <div class="card-title">
    <div class="card-title_title">
      <span>
        <span class="iconfont icon-liuyanban-xian"></span>
        友情链接
      </span>
      <i></i>
    </div>
    <div class="link">
      <n-space>
        <n-button quaternary v-for="(item,index) in friendLinks" :key="index" :color="item.color">
          <a :href="item.href" target="_blank">{{ item.name }}</a>
        </n-button>
      </n-space>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getLink } from '../service/api/Blogger'
const friendLinks = ref()
const getLinkList = async ()=> {
  await nextTick()
  try{
    const res:any = await getLink({})
    const data = res.data._value.data
    friendLinks.value = data
  }catch(err) {
    console.log(err)
  }
}
onMounted(()=>{
  getLinkList()
})
</script>
<style scoped lang="scss">
.link{
    padding: 0 10px;
    margin-top: 10px;
  }
</style>